<template>
	<div>
		<el-input
			v-model="inputVal"
			:disabled="disabled"
			:placeholder="placeholder"
			:clearable="clearable"
			:type="type"
			:size="size"
			:readonly="readonly"
			@blur="onBlurEvent"
			@keyup.enter.native="onEnter"
			@input="onInputEvent"
			@change="onChangeEvent"
		></el-input>
	</div>
</template>
<script>
    export default {
        name: 'JkInput',
        model: {
            prop: 'value',
            event: 'change'
        },
        props: {
            disabled: {
                type: Boolean,
                default: false
            },
            readonly: {
                type: Boolean,
                default: false
            },
            clearable: {
                type: Boolean,
                default: true
            },
            value: {
                type: [String, Number],
                default: ''
            },
            placeholder: {
                type: String,
                default: '请输入...'
            },
            size: {
                type: String,
                default: 'medium'
            },
            type: {
                type: String,
                default: 'text'
            }
        },
        data() {
            return {
                inputVal: ''
            };
        },
        watch: {
            value(newVal) {
                this.inputVal = newVal;
            }
        },
        mounted() {
            this.inputVal = this.value;
        },
        methods: {
            onEnter() {
                this.$emit('on-enter', this.inputVal);
            },
            onBlurEvent() {
                this.$emit('blur', this.inputVal);
            },
            onInputEvent(val) {
                this.$emit('change', val);
            },
            onChangeEvent(val) {
                this.$emit('change', val);
            }
        }

    };
</script>
